<template>
  <el-upload
    list-type="picture-card"
    :action="actionUrl"
    :limit=limit
    :headers="tokenVal"
    :on-exceed="limitFun"
    :on-progress="progressFun"
    :on-success="successFun"
    :on-error="errorFun"
    :on-remove="handleRemove"
  >
    <i class="el-icon-plus"></i>
  </el-upload>
</template>
  
<script>
    export default {
        name: "uploadFile",
        props: {
            limit: {
                type: Number,
                default: 5,
            },
            actionUrl: {
                type: String,
                default: "http://110.41.19.205:8080/api/file/upload"
            },
            picnum: {
                type: Number,
                default: 0,
            },
            limitFun: {
                type: Function,
                default: function(arg) {
                    this.$message({
                        message: `上传文件超出限制数量${arg.length}`,
                        type: 'warning'
                    });
                },
            }
        },
        data(){
            return{
                tokenVal: {satoken: window.localStorage.getItem('loginKey')}//请求拦截器目前没有生效，先这样写达到联调目的
            }
        },
        methods: {
            handleRemove(file, fileList) {
                let picnum = this.picnum;
                this.$emit('remove',picnum,file,fileList)
            },
            successFun(response, file, fileList) {
                let picnum = this.picnum;
                if(response.success) {
                    this.$emit('success',picnum,file,fileList)
                }else {
                    fileList.pop()
                    this.$message({
                        message: `上传文件失败，${response.message}`,
                        type: 'error'
                    })
                }
            },
            errorFun(err, file, fileList) {
                this.$message({
                    message: `上传文件失败`,
                    type: 'error'
                })
            }
        }
    };
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    h3 {
        margin: 40px 0 0;
    }
    ul {
        list-style-type: none;
        padding: 0;
    }
    li {
        display: inline-block;
        margin: 0 10px;
    }
    a {
        color: #42b983;
    }
</style>
  